<template>
  <view class="fui-wrap">
    <view class="fui-content__box">
      <view id="user" @click="startFlip" style="display: flex; justify-content: center; align-items: center;">
        <image id="photo" :src="images"/>
      </view>
    </view>
  </view>
</template>

<script>
import frontImg from '../../static/images/coin/front.png'
import behindImg from '../../static/images/coin/behind.png'

export default {
  data() {
    return {
      images: frontImg
    }
  },
  methods: {
    startFlip() {
      // 停止之前的定时器
      clearInterval(this.interval);

      let flipCount = 10; // 翻转次数
      let currentFlip = 0;
      let isFront = true;

      this.interval = setInterval(() => {
        if (currentFlip < flipCount) {
          if (isFront) {
            document.getElementById('user').style.transform = 'rotateY(360deg)';
          } else {
            document.getElementById('user').style.transform = 'rotateY(0deg)';
          }

          isFront = !isFront;
          currentFlip++;
        } else {
          // clearInterval(this.interval);
          // setTimeout(() => {
          //   this.showRandomImage();
          // }, 2000); // 等待2秒后展示随机图片
        }
      }, 150); // 每150ms翻转一次
    },
    showRandomImage() {
      const randomIndex = Math.floor(Math.random() * 2); // 随机选择显示哪张图片
      if (randomIndex === 0) {
        this.images = frontImg;
      } else {
        this.images = behindImg;
      }
    }
  }
}
</script>

<style>
page {
  background-color: #fff;
  font-weight: normal;
}

.btn {
  display: inline-block;
  text-align: center;
  line-height: 40px; /* 根据按钮高度调整 */
  padding: 0 20px; /* 根据按钮宽度调整 */
  background-color: #f00; /* 按钮背景颜色 */
  color: #fff; /* 按钮文本颜色 */
}

.fui-content__box {
  width: 100%;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#user {
  /*使用一个div作为图片和文字背景的父元素，让div旋转即可让文字和图片旋转*/
  width: 300px;
  height: 300px;
  position: relative; /*设置成这个以便图片和文字absolute定位*/
  overflow: hidden;
  transition: transform 1.5s, border-radius 1.5s;
  /*设置过渡时间*/
}

#user:hover {
  border-radius: 50%;
  /*div由正方形变为圆形*/
  transform: rotateY(180deg);
  /*旋转180度展示反面*/
}

#photo {
  width: 300px;
  height: 300px;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 1; /*此处后面有解释*/
}

#name {
//background-color: black; //color: white; width: 300px;
  height: 300px;
  margin: 0; /*为了对齐外边距设置为0*/

  position: absolute;
  top: 0;
  left: 0;

  text-align: center;

  z-index: 0; /*此处后面有解释*/
  transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  /*反方向一倍拉伸x坐标，即得镜像，跟随div旋转之后便是正的*/
}


</style>
